<template>
  <view class="recharge">
    <view class="recharge-title"> 充值金额 </view>

    <view class="recharge-money">
      <view
        class="recharge-money-item"
        v-for="(item, index) in moneyList"
        :key="index"
        :class="activeIndex == index ? 'active' : ''"
        @click="selectMoney(index)"
      >
        <view class="recharge-item-money">
          {{ item.money }}<text class="span">元</text>
        </view>

        <view class="recharge-item-tip"> 仅供测试 </view>
      </view>
    </view>

    <view class="recharge-title h-m-t-20"> 充值说明 </view>
    <view class="recharge-tip">
      <view>1.充值所得金额仅该小程序可用。</view>
      <view>2.该充值功能未调用微信支付，点击充值即可。</view>
      <view>3.充值功能仅供功能测试使用。</view>
    </view>

    <view class="recharge-buttom-box">
      <view class="buttom-left">
        <view class="buttom-left-info">付款金额</view>
        <view class="buttom-left-money"
          >¥ {{ moneyList[activeIndex].money }}</view
        >
      </view>

      <view class="buttom-right" @click="okEvent"> 立即充值 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { wechatPayInfo, cancelWechatPayOrder } from "@/common/apis/order.js";

const store = useStore();

const moneyList = ref([
  { id: 0, money: "0.01" },
  { id: 1, money: "200.00" },
  { id: 2, money: "300.00" },
  { id: 3, money: "400.00" },
]);

const activeIndex = ref(0);

function selectMoney(index) {
  activeIndex.value = index;
}

// 微信小程序支付
function fetchWechatPay(out_trade_no) {
  return new Promise((resolve, reject) => {
    uni.login({
      success: async (res) => {
        try {
          const { data: payInfo } = await wechatPayInfo({
            out_trade_no,
            code: res.code,
          });
          if (payInfo) {
            uni.requestPayment({
              provider: "wxpay",
              package: payInfo.package,
              nonceStr: payInfo.nonceStr,
              signType: payInfo.signType,
              timeStamp: payInfo.timeStamp,
              paySign: payInfo.paySign,
              orderInfo: payInfo,
              success: resolve,
              fail: async (err) => {
                console.log(err);
                await cancelWechatPayOrder({ out_trade_no });
                uni.$u.toast("支付失败");
                reject(err);
              },
            });
          } else {
            reject();
          }
        } catch (err) {
          reject(err);
        }
      },
    });
  });
}

async function okEvent() {
  uni.showLoading();
  try {
    const res = await store.dispatch("fetchWalletRecharge", {
      amount: moneyList.value[activeIndex.value].money,
    });
    if (res.data.out_trade_no) {
      await fetchWechatPay(res.data.out_trade_no);
      await store.dispatch("fetchGetUserInfo");
      uni.$u.toast("充值成功", 3000);
      uni.navigateBack();
    }
  } catch (err) {
    uni.$u.toast("充值失败");
    uni.hideLoading();
  }
}
</script>

<style lang="scss">
.recharge {
  margin: 30rpx;

  .recharge-title {
    color: #333333;
    font-weight: bold;
  }

  .recharge-tip {
    margin-top: 20rpx;

    view {
      font-size: 28rpx;
      color: #666666;
      margin-top: 10rpx;
    }
  }

  .recharge-money {
    display: flex;
    align-items: center;
    overflow: hidden;
    overflow-x: scroll;
    margin-top: 10rpx;

    .recharge-money-item:first-child {
      margin-left: 0;
    }

    .recharge-money-item {
      margin: 20rpx 10rpx;
      width: 280rpx;
      height: 360rpx;
      border: 2rpx solid #000;
      border-radius: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      box-shadow: #f0f0f0 0px 1px 8px 0;
      flex-shrink: 0;

      .recharge-item-money {
        font-size: 60rpx;
        color: #333;

        .span {
          font-size: 28rpx;
        }
      }

      .recharge-item-tip {
        padding: 6rpx 20rpx;
        font-size: 24rpx;
        background: #efefef50;
        border-radius: 40rpx;
        margin-top: 20rpx;
        color: #666666;
      }
    }

    .active {
      background-image: url("");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      border: none;
    }
  }
  .recharge-buttom-box {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 60rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 80rpx;
    padding-top: 20rpx;
    border-top: 2rpx dashed #000;
    box-sizing: border-box;

    .buttom-left {
      font-size: 28rpx;
      display: flex;
      align-items: flex-end;

      .buttom-left-money {
        font-weight: bold;
        font-size: 40rpx;
        margin-left: 20rpx;
        line-height: 38rpx;
      }
      .buttom-left-money::first-letter {
        font-weight: normal;
        font-size: 28rpx;
      }
    }

    .buttom-right {
      padding: 16rpx 58rpx;
      background: #333;
      color: #fff;
      border-radius: 50rpx;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}
</style>
